import React, { useEffect } from 'react';
import { login } from '@api/home';
import useStores from '@s';
import { Form, Input, Button, Row, Col } from 'antd';
import CryptoJS from 'crypto-js';
export default function LoginModal() {
  const { globalStore } = useStores();
  const [form] = Form.useForm();
  const { showLoginModal } = globalStore;
  const [username, setUsername] = React.useState('');
  const [password, setPassword] = React.useState('');

  const disableScroll = () => {
    window.addEventListener('wheel', preventScroll, { passive: false });
    window.addEventListener('touchmove', preventScroll, { passive: false });
    document.querySelector('.content-container')?.classList.add('scrollbar-hidden');
  };
  // 恢复滚动
  const enableScroll = () => {
    window.removeEventListener('wheel', preventScroll);
    window.removeEventListener('touchmove', preventScroll);
    document.querySelector('.content-container')?.classList.remove('scrollbar-hidden');
  };
  const preventScroll = e => {
    e.preventDefault();
  };

  const handleCloseLoginModal = () => {
    globalStore.showLoginModal = false;
  };

  useEffect(() => {
    if (showLoginModal) {
      disableScroll();
    }
    return () => {
      enableScroll();
    };
  }, [showLoginModal]);

  const handleUsernameInput = e => {
    const value = e.target.value;
    setUsername(value);
  };

  const handlePasswordInput = e => {
    const value = e.target.value;
    setPassword(value);
  };

  const handleLogin = async () => {
    if (!username || !password) {
      return window.$message.warning('请输入用户名和密码');
    }

    const data = {
      username,
      password: CryptoJS.MD5(password).toString(),
    };

    const res = await login(data);

    window.$message.success('登录成功');
    const token = res.data.access_token;
    if (token) {
      localStorage.setItem('token', token);
    }
    globalStore.showLoginModal = false;
  };

  return (
    showLoginModal && (
      <div
        className="fixed top-0 left-0 w-full h-full z-50 bg-black/5 dark:bg-black/5 flex items-center justify-center animate-fade-in"
        onClick={handleCloseLoginModal}
      >
        <div
          className="px-3 py-6 loading-modal min-w-[360px] min-h-[200px] bg-white/30 dark:bg-black/30 rounded-lg backdrop-blur-lg shadow-md dark:shadow-[0px_0px_20px_0px_#FFFFFF0A,2px_2px_20px_0px_#FFFFFF4D_inset] animate-fade-in-top border-new-bg border-[1px] border-solid dark:border-none"
          onClick={e => e.stopPropagation()}
        >
          <div className="flex items-center justify-center">
            <img src="/images/logo.png" width={'86px'} alt="" />
          </div>
          <div className="flex items-center justify-center pt-6">
            <fieldset className="fieldset w-[80%]">
              <label className="label text-left">用户名</label>

              <input
                type="username"
                onInput={handleUsernameInput}
                className="input focus:border-none focus:shadow-none focus:outline-none"
                placeholder="请输入用户名"
              />

              <label className="label text-left pt-4">密码</label>

              <input
                type="password"
                onInput={handlePasswordInput}
                className="input focus:border-none focus:shadow-none focus:outline-none"
                placeholder="请输入密码"
              />

              <button
                className="btn btn-neutral mt-6 dark:bg-new-bg bg-new-bg-dark dark:text-new-text text-new-text-dark dark:border-none"
                onClick={handleLogin}
              >
                登录
              </button>
            </fieldset>
          </div>
        </div>
      </div>
    )
  );
}
